feat(experimentation): rollout configuration step in experiment wizard#7859
Open
Zaimwa9 wants to merge 13 commits into
Open
feat(experimentation): rollout configuration step in experiment wizard#7859Zaimwa9 wants to merge 13 commits into
Zaimwa9 wants to merge 13 commits into
Conversation
- Slider: primary fill up to the handle, 50% width centred, floating value above the handle (removes the large readout) - Variation split: row cards, Split evenly button, weight distribution bar, per-arm colours; drop variant value display; smaller weight inputs - Derive initial split weights from the environment feature state, not just the project default allocation - Add opt-in white prop to ContentCard and apply to wizard cards; add title/description spacing - Copy: Choose -> Select
- Fix initial split weights: a zero environment override no longer masks the feature default (match the | | fallback used elsewhere) - Slider track now 70% width; widen weight inputs so full numbers show - ContentCard titles semi-bold - Summary becomes a titleless grey callout with a people icon and bold variation names - Update Sample Size copy; drop em dash from the bucketing note
…ment-audience-gradual-rollout
… state and refine rollout step UX - Fetch live environment feature state via getFeatureStates so variation weights seed from the per-environment allocations (the feature-list serializer omits multivariate_feature_state_values) - Redesign rollout summary: coloured swatches per arm, time-to-significance note, line breaks - Rework rollout slider: editable percentage input with inline % suffix, +/-5% steppers, clickable 0/25/50/75/100 ticks - Update sample size copy
- Extract shared DistributionBar component (control/variation arms + hatched not-released area) - Fold the traffic preview into the rollout summary as 'Rollout configuration': scaled bar with legend positioned under each segment showing the configured variant weight - Simplify the slider: borderless percentage input with inline % suffix, remove +/-5% steppers - Tidy sample size and summary copy
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
the
front-end
Contributor
Docker builds report
|
Contributor
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
|
Contributor
Visual Regression19 screenshots compared. See report for details. |
talissoncosta
approved these changes
Jun 24, 2026
talissoncosta
left a comment
talissoncosta
left a comment
Contributor
There was a problem hiding this comment.
Looks pretty good, solid!!! Thanks for that @Zaimwa9 !
My main question is around the white prob. As it is not a blocker I will approve it.
| compact, | ||
| description, | ||
| title, | ||
| white, |
Contributor
There was a problem hiding this comment.
Do you mind giving me a bit more context on this prop ?
| compact, | ||
| description, | ||
| title, | ||
| white, |
Contributor
There was a problem hiding this comment.
Do you mind giving me a bit more context on this prop ?
Comment on lines
19
to
+22
| &__heading { | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 6px; |
Contributor
There was a problem hiding this comment.
nit:
display: flex; flex-direction: column; gap: 6px is d-flex flex-column gap-2 (8px) as utilities on the element. 6px is off the spacing scale, but gap-2 might close enough and lets the rule go.
Comment on lines
+51
to
+86
| <div className='rollout-summary'> | ||
| <div className='rollout-summary__header'> | ||
| <span className='rollout-summary__title'>Rollout configuration</span> | ||
| <span className='rollout-summary__not-released'> | ||
| <Icon name='eye-off' width={16} /> | ||
| Not released to {notReleased}% | ||
| </span> | ||
| </div> | ||
|
|
||
| <DistributionBar segments={barSegments} /> | ||
|
|
||
| <div className='rollout-summary__legend'> | ||
| {arms.map((arm) => ( | ||
| <div | ||
| key={arm.label} | ||
| className='rollout-summary__legend-item' | ||
| style={{ width: `${arm.scaled}%` }} | ||
| > | ||
| <span className='rollout-summary__legend-label'>{arm.label}</span> | ||
| <span className='rollout-summary__legend-value'> | ||
| {formatPercentage(arm.weight)} | ||
| </span> | ||
| </div> | ||
| ))} | ||
| </div> | ||
|
|
||
| <div className='rollout-summary__note'> | ||
| <Icon name='people' width={20} /> | ||
| <span> | ||
| {rolloutPercentage}% of eligible identities enter the experiment. | ||
| <br /> | ||
| Actual time-to-significance depends on traffic, baseline rate, and the | ||
| lift you're trying to detect. | ||
| </span> | ||
| </div> | ||
| </div> |
Contributor
There was a problem hiding this comment.
Suggestion:
What if we add the legends below instead of following the spaces on bar.
Before:
After:
I just thought that it could be hard to read or identify the variant when the percentage is low
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Adds the Rollout configuration step to the Create Experiment wizard (before Metrics). Frontend only, pairs with the backend
experiment_rolloutcontract in #7851.experiment_rolloutpayload into create: maps the control value to the backend's{ type, value }shape; variant splits pass through asmultivariate_feature_state_values.DistributionBarcomponent and a pure, unit-testedrollout.tsutil module.How did you test this code?
rollout.test.tscovers split defaults, even split, control percentage, summary rows, traffic segments, and the control-value mapper.experiment_rolloutis posted on create.